<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="app-container">
        <ud-card>

            <div class="myheader">
                <div class="part-left"></div>
                <div class="part-right">
                    <div class="block">
                        <el-button icon="el-icon-refresh" @click="loadData" size="small">刷新</el-button>
                        <el-button v-if="btns.create_coupon_config" size="small" type="primary" icon="el-icon-plus"
                            @click="createHandle">新建卡券配置</el-button>
                    </div>
                </div>
            </div>
            <el-divider></el-divider>
            <el-table v-loading="loading" :data="items" size="small" fit highlight-current-row>
                <el-table-column prop="id" width="80px" label="#" />
                <el-table-column prop="name" label="卡券名" width="200">
                    <template slot-scope="scope">
                        <ud-tooltip :text="scope.row.name"></ud-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="desc" label="简介" >
                    <template slot-scope="scope">
                        <ud-tooltip :text="scope.row.desc"></ud-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="expired_at" label="生效时间" width="160">
                    <template slot-scope="scope">
                        {{ scope.row.starts_at | utcFormater }}
                    </template>
                </el-table-column>

                <el-table-column prop="expired_at" label="过期时间" width="160">
                    <template slot-scope="scope">
                        {{ scope.row.expired_at | utcFormater }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80px">
                    <template slot-scope="scope">
                        <el-link v-if="btns.update_coupon_config" type="primary" @click="editHandle(scope.row)">编辑</el-link>
                        <el-link v-if="btns.delete_coupon_config" type="danger"
                            @click="deleteHandle(scope.row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>

            <coupon-config-form ref="configform" @change="changedHandle" />

        </ud-card>
    </div>
</template>

<style scoped lang="scss">
.myheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 20px 0px;

    .part-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .block {
            margin-left: 10px;
        }
    }

    .part-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .block {
            margin-right: 10px;
        }
    }
}
</style>

<script>
import CouponConfigForm from './CouponConfigForm.vue'
import {
    getCouponConfigList,
    deleteCouponConfig,
} from "@/api/coupon";
export default {
    components: { CouponConfigForm, },
    name: 'coupons',
    props: {
        btns: { type: Object, default: {} },
    },
    data () {
        return {
            loading: false,
            items: [],
        };
    },
    created: function () {
        this.loadData();
    },
    methods: {
        deleteHandle: function (item) {
            var msg =
                "您确定要删除这个卡券吗？";
            this.$confirm(msg, "删除确认").then((resp) => {
                this.loading = true;
                deleteCouponConfig(item.id).then((resp) => {
                    this.loading = false;
                    if (resp.status == 0) {
                        this.$message.success("已删除");
                        this.loadData();
                    }
                });
            });
        },

        createHandle: function () {
            var item = {
                name: '',
                desc: "",
                amount: 0,
                expired_at: "",
                total_cont: 10,
                enable: true,
            };
            this.$refs.configform.openDialog(item)
        },

        changedHandle: function () {
            this.loadData();
        },

        editHandle: function (item) {
            var data = JSON.parse(JSON.stringify(item))
            this.$refs.configform.openDialog(data)
        },

        loadData: function () {
            getCouponConfigList().then((resp) => {
                this.items = resp.data.result;
                this.loading = false;
            });
        },

    },
};
</script>